/*
基础样式
box-sizing设置为inherit,继承body
*/
*,
*::after,
*::before {
  margin: 0px;
  padding: 0px;
  box-sizing: inherit;
}

html {
  // 10px 使用rem作为单位可以很好的控制整体页面的样式，秩序改变font-size，就可以让整个页面的样式发生变化
  font-size: 62.5%; // width 1200px - 1800px  1rem = 10px\

  // pc端优先原则从大到小处理媒体查询
  // width < 1200px
  @include respond(tab-land) {
    font-size: 56.25%; // 1rem = 9px  9/16 = 56.25%
  }

  // width < 900px
  @include respond(tab-port) {
    font-size: 50%; //1rem = 8px 8/16=50%
  }

  // width > 1800px
  @include respond(big-desktop) {
    font-size: 75%; //1rem = 12px 12/16=75%
  }
}

body {
  box-sizing: border-box;
  padding: 3rem;
  margin: 0;

  // 竖平板模式下，将padding设置为0
  @include respond(tab-port) {
    padding: 0;
  }
}

// 鼠标选中文字后文字背景与颜色
::selection {
  background-color: $color-primary;
  color: $color-white;
}